<template>
  <div>
  <div class="moive-info">
    <div class="left">
      <h1 class="movie-title">{{info.title}}</h1>
       <div>
        <div>{{info.ratings_count}}人评价</div>
      </div>
      <p><span class="rate"><Rate :value="info.rating.average==''?0:info.rating.average"></Rate></span>{{info.rating.average==''?'尚未评':info.rating.average}}分</p>
      <p class="small">类型：<span v-for="(genres, index) in info.genres" :key="index">{{genres}}</span></p>
      <p class="small">导演：{{info.directors[0].name}}/年份：{{info.year}}/制片地区：{{info.countries}}</p>
      <p class="small">主演：<span v-for="(casts, index) in info.casts" :key="index">{{casts.name}}</span></p>
    </div>
    <div class="right">
      <img :src="info.images.medium" alt="">
    </div>
  
  </div>
    <div class="sum">
      <div class="title">影片概述</div>
      <p>
        {{info.summary}}
      </p>

    </div>
    
  </div>
</template>

<script>

import Rate from 'vue-tiny-rate';
export default {
  data() {
    return {
      id: this.$route.params.id,
      info:{},
    };
  },
  mounted: function(){
            
        },
  methods: { 

    getList: function(id){
      var newUrl="https://api.douban.com/v2/movie/subject/" + this.id
      this.$http.jsonp(newUrl, {}, { headers: {}, emulateJSON: true })
          .then(res => {
            if(res.status==200){
              this.info = res.body ;
              console.log(this.info)
            }else{
             console.log('获取失败')
            }
       
          });


    }
            
        },
  components: {
        Rate,
    },
  created() {
    this.getList();
  },
  watch: {
    "info":function(){
       this.$emit("changTit",true,'电影详情-'+this.info.title);
    }
  },
};
</script>

<style lang="scss" scoped>
  #content{
            overflow: scroll;
        }

  .moive-info{
    h1{font-size: 24px}
    display: flex;
    justify-content: space-around;
    padding: 10px;
    .left{
      flex: 2;
      p{line-height: 1.25em;margin: 0}
      .rate{width: 40%;display: inline-block};
      .small{font-size: 12px;span{font-size: 12px}}
    };
    .right{
      flex: 1;
      img{width: 100%}
    }
    
  }
  .sum{padding: 10px;
    .title{font-size: 18px;border-left: 3px solid #26A2FF;padding-left: 10px;margin-bottom: 15px}
    }
</style>


